<template>
  <div class="settings__container">
    <FloatBtn @click="handleOpen" />
    <el-drawer v-model="drawer" :direction="direction">
      <template #header>
        <div class="settings__title">系统设置</div>
      </template>
      <template #default>
        <div class="drawer__body__container">
          <el-row :gutter="10">
            <el-col :span="24" class="body__item__container">
              <div class="item__content__container">
                <div class="content__label">主题</div>
                <div class="content__value">
                  <el-radio-group
                    v-model="settingsStore.theme"
                    @change="changeTheme"
                  >
                    <el-radio value="light">浅色</el-radio>
                    <el-radio value="dark">深色</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </el-col>
            <el-col :span="24" class="body__item__container">
              <div class="item__content__container">
                <div class="content__label">组件大小</div>
                <div class="content__value">
                  <el-radio-group v-model="appStore.size" @change="changeSize">
                    <el-radio value="small">小型</el-radio>
                    <el-radio value="default">默认</el-radio>
                    <el-radio value="large">大型</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </el-col>
            <el-col :span="24" class="body__item__container">
              <div class="item__content__container">
                <div class="content__label">语言</div>
                <div class="content__value">
                  <el-radio-group
                    v-model="appStore.language"
                    @change="changeLanguage"
                  >
                    <el-radio value="zh-cn">中文</el-radio>
                    <el-radio value="en">英文</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </el-col>
            <el-col :span="24" class="body__item__container">
              <div class="item__content__container">
                <div class="content__label">头部固定</div>
                <div class="content__value">
                  <el-radio-group
                    v-model="settingsStore.fixedHeader"
                    @change="changeFixedHeader"
                  >
                    <el-radio :value="true">是</el-radio>
                    <el-radio :value="false">否</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </el-col>
            <el-col :span="24" class="body__item__container">
              <div class="item__content__container">
                <div class="content__label">页面标签</div>
                <div class="content__value">
                  <el-radio-group
                    v-model="settingsStore.showTagView"
                    @change="changeTagView"
                  >
                    <el-radio :value="true">是</el-radio>
                    <el-radio :value="false">否</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
  import FloatBtn from "@/components/FloatBtn/FloatBtn.vue";
  const drawer = ref(false);
  const direction = ref<"rtl" | "ltr" | "ttb" | "btt" | undefined>("rtl");

  import { useSettings } from "@/store/modules/settings";
  const settingsStore = useSettings();

  import { useAppStore } from "@/store/modules/app";
  const appStore = useAppStore();

  // 切换语言
  const changeLanguage = (e: string | number | boolean | undefined) => {
    appStore.changeLanguage(e as string);
  };

  // 切换组件大小
  const changeSize = (e: string | number | boolean | undefined) => {
    appStore.changeSize(e as string);
  };

  // 切换主题
  const changeTheme = (e: string | number | boolean | undefined) => {
    useToggle(e);
    settingsStore.changeTheme(e as string);
  };

  // 切换头部是否固定
  const changeFixedHeader = (e: string | number | boolean | undefined) => {
    useToggle(e);
    settingsStore.changeFixedHeader(e as boolean);
  };

  // 切换页面标签导航
  const changeTagView = (e: string | number | boolean | undefined) => {
    useToggle(e);
    settingsStore.changeTagView(e as boolean);
  };

  const handleOpen = () => {
    drawer.value = true;
  };

  const cancelClick = () => {
    drawer.value = false;
  };

  const confirmClick = () => {
    drawer.value = false;
  };
</script>

<style lang="scss" scoped>
  .settings__container {
    .settings__title {
      font-size: 1.6rem;
      font-weight: 600;
      color: var(--text-color);
      text-align: center;
    }
    .drawer__body__container {
      box-sizing: border-box;
      .body__item__container {
        margin-bottom: 10px;
        .item__content__container {
          .content__label {
            font-size: var(--el-font-size-large);
          }
        }
      }
    }
  }
</style>
